/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React from "react";
import { connect, useHistory } from "dva";
import { Button, Form, Popconfirm, Table, Modal, message } from "antd";
import { useAntdTable } from "ahooks";
import brands from "@kb/brands";

import KbBrands from "@/components/Select/Brands";

// 品牌对应map
export const brandsMap = (brandss => {
  const data = {};
  brandss.map(item => {
    data[item.code] = item;
  });
  return data;
})(brands);

const FormItem = Form.Item;

const Setting = props => {
  const { dispatch, form } = props;
  const { getFieldDecorator } = form;
  const history = useHistory();
  const getTableData = (res, formData) => {
    return dispatch({
      type: "order_finance/getQuoteList",
      payload: {
        ...res,
        ...formData,
        page: res.current,
      },
    }).then(ress => ({
      total: ress.data?.total,
      list: ress.data?.list,
    }));
  };
  const { search, loading, tableProps } = useAntdTable(getTableData, {
    defaultPageSize: 10,
    form,
  });
  const { submit, reset } = search;
  const columns = [
    {
      title: "报价单名称",
      dataIndex: "name",
      key: "name",
      align: "center",
    },
    {
      title: "快递品牌",
      dataIndex: "brand",
      key: "brand",
      align: "center",
      render: val => (
        <div>
          {val
            .split(",")
            .map(item => brandsMap[item].name)
            .reduce((pre, next, index) => `${pre}${index != 0 ? "," : ""}${next}`, [""])}
        </div>
      ),
    },
    {
      title: "报价模式",
      dataIndex: "id",
      key: "id",
      align: "center",
      render: () => <div>首重/续重</div>,
    },
    {
      title: "创建时间",
      dataIndex: "create_time",
      key: "create_time",
      align: "center",
    },
    {
      title: "操作报价单",
      dataIndex: "operanor",
      key: "operanor",
      align: "center",
      render: (text, record) => {
        return (
          <div>
            <a onClick={() => onNavigator("edit", record.id)}>编辑</a>
            <Popconfirm
              title="确认删除此报价单？"
              okText="确认"
              cancelText="取消"
              placement="topRight"
              onConfirm={() => checkDeleteStatus(record.id)}
            >
              <a style={{ marginLeft: "20px", color: "red" }}>删除</a>
            </Popconfirm>
          </div>
        );
      },
    },
  ];

  const handleDelete = id => {
    dispatch({
      type: "order_finance/quotationDelete",
      payload: {
        id,
      },
    }).then(() => {
      message.success("删除成功", 1);
      submit();
    });
  };

  const checkDeleteStatus = id => {
    dispatch({
      type: "order_finance/deleteCheck",
      payload: {
        id,
      },
    }).then(({ code, msg }) => {
      if (code == 0) {
        handleDelete(id);
      } else {
        Modal.confirm({
          cancelText: "取消",
          okText: "确定删除",
          centered: true,
          content: msg,
          onOk: () => handleDelete(id),
        });
      }
    });
  };

  const onNavigator = (type, id) => {
    const linkList = {
      add: "/order/finance/finance_add",
      edit: `/order/finance/finance_edit?id=${id}`,
    };
    history.push(linkList[type]);
  };

  return (
    <div>
      <Form layout="inline">
        <div className="flex-row justify-between" style={{ marginBottom: 16 }}>
          <FormItem>
            <Button type="primary" onClick={onNavigator.bind(null, "add")}>
              新增
            </Button>
          </FormItem>
          <FormItem>
            <FormItem>
              {getFieldDecorator("brand", {
                initialValue: "",
              })(<KbBrands style={{ width: 200 }} requestType="source/getKopBrand" />)}
            </FormItem>
            <FormItem>
              <Button type="primary" icon="search" onClick={submit}>
                搜索
              </Button>
            </FormItem>
            <FormItem>
              <Button onClick={reset}>重置</Button>
            </FormItem>
          </FormItem>
        </div>
      </Form>
      <Table loading={loading} columns={columns} rowKey="id" {...tableProps} />
    </div>
  );
};

export default connect(result => {
  const { loading, order_finance } = result;
  return {
    loading,
    order_finance,
  };
})(Form.create()(Setting));
